<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    pageContext.setAttribute("App_Path", request.getContextPath());
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>HRSystem</title>

    <!-- Bootstrap -->
    <link href="${App_Path}/static/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="${App_Path}/static/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="${App_Path}/static/css/style.css" rel="stylesheet">

</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="${App_Path}">人力资源管理系统</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class=""><a href="${App_Path}">首页</a></li>
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">员工管理 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="${App_Path}/list">查看员工信息</a></li>
                        <li><a href="${App_Path}/input">新增员工信息</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<!-- Begin page content -->
<div class="container">
    <div class="page-header">
        <h3>新增员工信息</h3>
    </div>
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="empName" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="empName" id="empName" placeholder="Name">
                <span class="help-block"> </span>
            </div>
        </div>
        <div class="form-group">
            <label for="" class="col-sm-2 control-label">性别</label>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="empGender" value="1"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="empGender" value="0"> 女
                </label>
                <span class="help-block"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="empEmail" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" name="empEmail" id="empEmail" placeholder="Email" value="">
                <span class="help-block"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="" class="col-sm-2 control-label">部门</label>
            <div class="col-sm-10">
                <select id="sel" class="form-control selectpicker" title="请选择部门" name="deptId">

                </select>
                <span class="help-block"></span>
            </div>
        </div>
        <a href="#">
            <button type="button" id="emp_save_btn" class="btn btn-primary col-xs-12 col-md-12">保存</button>
        </a>
    </form>
</div>

<footer class="footer">
    <div class="container">
        <p class="text-muted">CC 2020杭州职业技术学院 软件技术专业</p>
    </div>
</footer>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="${App_Path}/static/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="${App_Path}/static/dist/js/bootstrap.min.js"></script>

<script src="${App_Path}/static/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
  $(function () {
    //发送异步请求，获取部门信息
    $.ajax({
      url:"${App_Path}/depts",
      type:"get",
      dataType:"json",
      success:function (result) {
        if(result.code == 100){
          $.each(result.extend.depts,function (index,dept) {
            var optionEle = $("<option></option>").attr("value",dept.id).append(dept.deptName);
            $("#sel").append(optionEle);
          });
          $("#sel").selectpicker("refresh");
        }
      }
    })
  });

  $("#emp_save_btn").click(function () {
    // 数据校验
    if($(this).attr("check-val")=="fail"){
      return false;
    }

    // 姓名验证
    var empName = $("#empName").val();
    var regName = /(^[a-zA-Z0-9]{6,13}$)|(^[\u4e00-\u9fa5]{2,6}$)/;
    if(regName.test(empName)){
        //验证通过
      show_validation_msg("#empName","success","");
    }else{
        //验证失败
      show_validation_msg("#empName","error","用户名必须是2-6位中文或6-13位英文数字组合");
      return false;
    }

    // 性别验证
    if($("[name='empGender']:checked").length > 0){
      show_validation_msg("[name='empGender']","success","");
    }else {
      show_validation_msg("[name='empGender']","error","请选择性别！");
      return false;
    }

    //邮箱验证
    var empEmail = $("#empEmail").val();
    var regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    if(regEmail.test(empEmail)){
      //验证通过
      show_validation_msg("#empEmail","success","");
    }else{
      //验证失败
      show_validation_msg("#empEmail","error","只允许英文字母、数字、下划线、英文句号、以及中划线组成");
      return false;
    }

    //部门验证
    if($("[name='deptId']").val() != ""){
      //验证通过
      show_validation_msg("[name='deptId']","success","");
    }else{
      //验证失败
      show_validation_msg("[name='deptId']","error","请选择部门！");
      return false;
    }
    //发送异步请求
    $.ajax({
      url:"${App_Path}/emp",
      data:$("form").serialize(),
      type:"post",
      dataType:"json",
      success:function (result) {
        console.log(result);
        if(result.code == 100){
          //保存成功
          window.location.href="${App_Path}/list";
        }else {
          //校验失败或保存失败
          if(undefined != result.extend.empName){
            show_validation_msg("#empName","error",result.extend.empName);
          }
          if(undefined != result.extend.empEmail){
            show_validation_msg("#empEmail","error",result.extend.empEmail);
          }
        }
      }
      
    })
  });

  function show_validation_msg(element,status,msg) {
    var formDiv = $(element).parents("div.form-group");
    formDiv.removeClass("has-success has-error");
    if("success" == status){
      formDiv.addClass("has-success");
    }else{
      formDiv.addClass("has-error");
    }
    formDiv.find("span.help-block").text(msg);
  }

  $("#empName").change(function () {
    $.ajax({
      url:"${App_Path}/checkName",
      data:{"empName":$(this).val()},
      type:"post",
      dataType:"json",
      success:function (result) {
        if(result.code == 100){
          show_validation_msg("#empName","success",result.extend.success_msg);
          $("#emp_save_btn").attr("check-val","success");
        }else{
          show_validation_msg("#empName","error",result.extend.fail_msg);
          $("#emp_save_btn").attr("check-val","fail");
        }
      }
    });
  });
  
</script>
</body>
</html>